<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>企业审计画像</title>
  <script src="../ruoyi/js/echartsjs/echarts.js"></script>
  <script src="../ruoyi/js/jquery-3.4.1/jquery-3.4.1.js"></script>
  <script src="../ruoyi/js//china/china.js"></script>
 </head>
  <body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1200px;height:600px;"></div>
    <script type="text/javascript">
     // 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
var days = ['2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019',  ];

var province = ['湖北', '广东', '浙江', '湖南', '河南', '安徽', '重庆', '山东', '江西', '四川', '江苏', '北京', '福建', '上海', '广西', '河北', '陕西', '云南', '海南', '黑龙江', '辽宁', '山西', '天津', '甘肃', '内蒙古', '新疆', '宁夏', '吉林', '贵州', '青海', '西藏', '澳门', '香港', '台湾'];

var data = [
    [4, 17, 3, 3, 0, 2, 2, 5, 0, 1, 1, 10, 6, 8, 2, 0, 1, 1, 1, 2, 0, 1, 1, 2, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0],
    [5, 47, 7, 3, 2, 5, 5, 9, 4, 8, 9, 26, 4, 12, 3, 1, 4, 7, 1, 1, 3, 4, 6, 1, 2, 6, 0, 1, 1, 1, 0, 0, 0, 0],
    [23, 92, 27, 25, 15, 24, 12, 29, 17, 26, 41, 54, 18, 31, 14, 13, 12, 10, 12, 8, 19, 13, 11, 4, 10, 19, 4, 16, 8, 5, 3, 0, 0, 0],
    [14, 66, 34, 20, 18, 18, 17, 27, 8, 22, 43, 50, 16, 41, 9, 9, 11, 9, 12, 3, 13, 11, 11, 7, 6, 17, 3, 9, 4, 5, 2, 0, 0, 0],
    [19, 67, 35, 20, 16, 22, 21, 26, 8, 26, 45, 51, 19, 40, 11, 15, 13, 13, 13, 3, 18, 15, 11, 9, 8, 21, 3, 10, 7, 4, 4, 0, 0, 0],
    [39, 86, 71, 27, 28, 28, 24, 38, 14, 37, 80, 91, 30, 113, 11, 19, 25, 15, 17, 12, 22, 19, 16, 8, 13, 20, 6, 10, 12, 4, 5, 0, 0, 0],
    [35, 84, 85, 30, 23, 32, 22, 36, 16, 37, 97, 96, 33, 124, 15, 16, 24, 16, 17, 16, 25, 19, 16, 10, 11, 22, 6, 11, 11, 7, 5, 0, 0, 0],
    [40, 109, 101, 36, 28, 38, 27, 41, 15, 41, 125, 111, 40, 135, 15, 18, 26, 13, 17, 14, 30, 20, 16, 10, 14, 26, 7, 13, 17, 7, 6, 0, 0, 0],
    [42, 132, 139, 37, 24, 42, 31, 49, 15, 40, 130, 115, 43, 157, 17, 25, 30, 13, 20, 15, 30, 22, 17, 9, 13, 22, 5, 11, 19, 10, 8, 0, 0, 0],
    [1, 12, 5, 1, 0, 1, 1, 2, 0, 1, 7, 1, 2, 4, 1, 2, 0, 2, 2, 2, 0, 1, 3, 0, 0, 0, 2, 0, 1, 1, 1, 0, 0, 0]
    
];

var sum = []

for (var i = 0; i < data.length; i++) {
    sum[i] = 0
    for (var j = 0; j < data[i].length; j++) {

        sum[i] = sum[i] + data[i][j]
    }

}

var yqyData = [
    days,
    sum
]

option = {
    baseOption: {




        timeline: {
            axisType: 'category',
            // realtime: false,
            // loop: false,
            autoPlay: true,
            playInterval: 2000,
            symbolSize: 12,
            left: '5%',
            right: '5%',
            bottom: '0%',
            width: '90%',
            // controlStyle: {
            //     position: 'left'
            // },
            data: days,
            tooltip: {
                formatter: days
            },
        },

        tooltip: {
            show: true,
            formatter: function(params) {
                return params.name + '：' + params.data['value']
            },
        },
        visualMap: {
            type: 'piecewise',
            pieces: [{
                    min: 121,
                    color: '#73240D'
                },
                {
                    min: 91,
                    max: 120,
                    color: '#BB0000'
                },
                {
                    min: 61,
                    max: 90,
                    color: '#BD430A'
                },
                {
                    min: 31,
                    max: 60,
                    color: '#E08150'
                },
                {
                    min: 11,
                    max: 30,
                    color: '#E9B090'
                },
                {
                    min: 1,
                    max: 10,
                    color: '#F2DDD2'
                },
                {
                    value: 0,
                    color: 'white'
                }
            ],
            orient: 'vertical',
            itemWidth: 25,
            itemHeight: 15,
            showLabel: true,
            seriesIndex: [0],

            textStyle: {
                color: '#7B93A7'
            },
            bottom: '10%',
            left: "5%",
        },
        grid: [{
                right: '5%',
                top: '20%',
                bottom: '10%',
                width: '20%'
            },
            {
                right: '54%',
                top: '12%',
                bottom: '75%',
                width: '40%'
            }

        ],

        xAxis: [{
            min: 0,
            max: 150,
            show: false


        }, {
            data: yqyData[0],
            gridIndex: 1
        }], //折线图x轴数据赋值，指定坐标信息,
        yAxis: [{
                    inverse: true,
                    offset: '2',
                    'type': 'category',
                    data: '',
                    nameTextStyle: {
                        color: '#fff'
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        //rotate:45,
                        textStyle: {
                            fontSize: 14,
                            color: '#000000',
                        },
                        interval: 0
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#333'
                        },
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: '#333'
                        }
                    },
                },


                {
                    name: '企业数',

                    inverse: false,
                    offset: '2',
                    'type': 'category',
                    nameTextStyle: {
                        color: '#000'
                    },
                    axisTick: {
                        show: true,
                    },
                    axisLabel: {
                        //rotate:45,
                        textStyle: {
                            fontSize: 14,
                            color: '#000000',
                        },
                        interval: 'auto'
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#333'
                        },
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: '#333'
                        }
                    },
                    gridIndex: 1
                }
            ]


            ,
        geo: {
            map: 'china',
            right: '35%',
            left: '5%',
            label: {
                emphasis: {
                    show: false,
                }
            },
            itemStyle: {
                emphasis: {
                    areaColor: '#00FF00'
                }
            }
        },
        series: [


            {
                name: 'mapSer',
                type: 'map',
                map: 'china',
                roam: false,
                geoIndex: 0,
                label: {
                    show: false,
                },
            },
            {
                'name': '',
                'type': 'bar',
                zlevel: 2,
                barWidth: '40%',
                label: {
                    normal: {
                        show: true,
                        fontSize: 14,
                        position: 'right',
                        formatter: '{c}'
                    }
                },
            },

            {
                name: '确诊新增曲线',
                type: 'line',
                xAxisIndex: 1, //指定折线图数据显示到：grid坐标系：0
                yAxisIndex: 1,
                data: yqyData[1] //折线图y轴数据赋值
            }

        ],

    },
    animationDurationUpdate: 3000,
    animationEasingUpdate: 'quinticInOut',
    options: []
};
for (var n = 0; n < days.length; n++) {

    var res = [];
    for (j = 0; j < data[n].length; j++) {
        res.push({
            name: province[j],
            value: data[n][j]
        });
    }
    res.sort(function(a, b) {
        return b.value - a.value;
    }).slice(0, 6);

    res.sort(function(a, b) {
        return a.value - b.value;
    });
    var res1 = [];
    var res2 = [];
    for (t = 0; t < 10; t++) {
        res1[t] = res[res.length - 1 - t].name;
        res2[t] = res[res.length - 1 - t].value;
    }
    console.log(res1);
    console.log("----------------");
    console.log(province);
    option.options.push({
        title: [{
                text: days[n] + '全国内控存在缺陷企业总数' + sum[n],
                textStyle: {
                    color: '#2D3E53',
                    fontSize: 28
                },
                left: 20,
                top: 20,
            },
            {
                show: true,
                text: '内控存在缺陷企业前十的省份',
                textStyle: {
                    color: '#2D3E53',
                    fontSize: 18
                },
                right: '10%',
                top: '15%'
            }
        ],
        yAxis: {
            data: res1,

        },
        series: [{
            type: 'map',
            data: res
        }, {
            type: 'bar',
            data: res2,
            itemStyle: {
                normal: {
                    color: function(params) {
                        // build a color map as your need.
                        var colorList = [{
                                colorStops: [{
                                    offset: 0,
                                    color: '#FF0000' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#990000' // 100% 处的颜色
                                }]
                            },
                            {
                                colorStops: [{
                                    offset: 0,
                                    color: '#00C0FA' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#2F95FA' // 100% 处的颜色
                                }]
                            }
                        ];
                        if (params.dataIndex < 3) {
                            return colorList[0]
                        } else {
                            return colorList[1]
                        }
                    },
                }
            },
        }]
    });
}


		myChart.setOption(option);
	</script>
  </body>
</html>
